<template>
	<div style="padding: 20px;width:100%;min-height:100%;background-color: #FFFFFF;">
		<div class="table-operations">
			<a-button @click="setAgeSort">
				年龄排序
			</a-button>
			<a-button @click="clearFilters">
			清除过滤
			</a-button>
			<a-button @click="clearAll">
				重置
			</a-button>
		</div>
		<a-table :data-source="data" @change="handleChange">
			<a-table-column key="name" title="姓名"  data-index="name" width="120px" align='center':filters="[
		        { text: '蔡', value: '蔡' },
		        { text: '王', value: '王' }
		      ]" 
			  :sortOrder="sortedInfo.columnKey === 'name' && sortedInfo.order"
			   :filteredValue="filteredInfo.name || null"
			  @filter="(value, record) => record.name == value" :sorter="(a, b) => a.name.localeCompare(b.name)" />
			<a-table-column key="age" title="年龄"  width="100px"  data-index="age" align='center' :sorter="(a, b) => a.age-b.age" 
			:sortOrder="sortedInfo.columnKey === 'age' && sortedInfo.order"
			:filteredValue="filteredInfo.age || null"
			/>
			<a-table-column key="id" title="ID"  width="160px"  data-index="id" align='center'
			 :filteredValue="searchText"
			 @Filter="customIdFilter"
			@FilterDropdownVisibleChange="customChange" :scopedSlots=" {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon'
          }">
				<div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
					style="padding: 8px">
					<a-input v-ant-ref="c => (searchInput = c)" :placeholder="`搜索 ${column.dataIndex}`"
						:value="selectedKeys[0]" style="width: 188px; margin-bottom: 8px; display: block;"
						@change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
						@pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)" />
					<a-button type="primary" icon="search" size="small" style="width: 90px; margin-right: 8px"
						@click="() => handleSearch(selectedKeys, confirm, column.dataIndex)">
						搜索
					</a-button>
					<a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
						重置
					</a-button>
				</div>
				<a-icon slot="filterIcon" slot-scope="filtered" type="search"
					:style="{ color: filtered ? '#108ee9' : undefined }" />



			</a-table-column>
			<a-table-column key="address" title="内容" data-index="address" align='center' />
			<a-table-column key="tags" title="标签" data-index="tags" align='center' :filtered-value="filteredTags"
				@filter="(value, record) => record.tags.includes(value)"
				:filter-dropdown-visible.sync="tagsFilterDropdownVisible">
				<template slot-scope="tags">
					<span>
						<a-tag v-for="tag in tags" :key="tag" :color="tag=='已签约'?'blue':'red'">{{ tag }}</a-tag>
					</span>
				</template>
			</a-table-column>
			<a-table-column key="action" title="操作">
				<template slot-scope="text, record">
					<span>
						<a>Action </a>
						<a>Delete</a>
					</span>
				</template>
			</a-table-column>
		</a-table>

	</div>

</template>
<script>
	import { list } from '../../api/list.js'
	export default {
		data() {
			return {
				filteredInfo: {},
				sortedInfo: {},
				searchText:[],
				data: [],
				filteredTags: [],
				tagsFilterDropdownVisible: false,
			};
		},
		created() {
			list().then((res) => {
				this.data = res.data.data.list
			})
		},
		methods: {
			handleChange(pagination, filters, sorter) {
				console.log('Various parameters', pagination, filters, sorter);
				this.filteredInfo = filters;
				this.sortedInfo = sorter;
			},
			clearFilters() {
				this.filteredInfo = {};
			},
			clearAll() {
				this.filteredInfo = {};
				this.sortedInfo = {};
			},
			setAgeSort() {
				this.sortedInfo = {
					order: 'descend',
					columnKey: 'age',
				};
			},

			customIdFilter(value, record) {
				console.log(value, record)
				return record.id
					.toString()
					.includes(value)
			},
			customChange(visible) {
				if (visible) {
					this.$nextTick(() => {
						this.searchInput.focus();
					});
				}

			},
			toggleSelectedTags(oldTags, tag, checked) {
				let newTags = [...oldTags];
				if (checked) {
					newTags.push(tag);
				} else {
					newTags = newTags.filter(t => t != tag);
				}
				return newTags;
			},

			handleSearch(selectedKeys, confirm, dataIndex) {
				confirm();
				this.searchText = [selectedKeys[0]];
				this.searchedColumn = dataIndex;
			},

			handleReset(clearFilters) {
				clearFilters();
				this.searchText = [];
			},

		},
	};
</script>

<style scoped lang="scss">
	.highlight {
		background-color: rgb(255, 192, 105);
		padding: 0px;
	}

	/deep/ .ant-dropdown-trigger {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.table-operations {
		margin-bottom: 16px;
	}

	.table-operations>button {
		margin-right: 8px;
	}
</style>
